<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
  <link rel="stylesheet" type="text/css" href="css/iconfon.css">

	<style type="text/css">
     .wrapper{
     	width: 400px;
     	height: 450px;
     	border: 2px solid #ccc;
      margin:100px auto;
      border-radius: 30px
     }
     .header{
     	text-align: center;
     	background: #09a1de;
      color: #fff;
      border-top-left-radius: 28px;
      border-top-right-radius:28px;

     }
     .header h2{
      margin: 0;
      height:60px;
      line-height: 60px;
      position: relative;
     }
     .item button{
      background-color: #09a1de;
      color: #fff;
      border: none;
      height: 40px;
      line-height: 40px;
      margin: 20px 10px;
      border-radius: 5px;

     }


	</style>
</head>
<body>
    <div class="wrapper">
       <div class="header">
          <h2>
             <span class="iconfont icon-fanhui" style="position:absolute; top:0; right:15px; color:red"></span>请选择省份
          </h2>
       </div>
       <div class="wrapper-a" style="position:relative;top:0;left:0;">
       <div class="province item">
          <button>广西壮族自治区</button>
          <button>广东</button>
          <button>云南</button>
          <button>上海</button>
          <button>海南</button>
          <button>河南</button>
          <button>江西</button>
          <button>北京</button>
          <button>湖南</button>
       </div>
       <div class="city item" style="position:absolute;left:400px;top:0px; width:300px;height: 320px; border: 1px solid #ccc; border-radius: 30px;display: none;

">
            <button>南宁</button>
            <button>柳州</button>
            <button>北海</button>
       </div>
       <div class="area item" style="position:absolute;left:700px;top:0px;width:300px;height:320px;border: 1px solid #ccc;border-radius: 30px;display: none;
">
            <button>柳南区</button>
            <button>柳北区</button>
            <button>鱼峰区</button>
       </div>
      </div>


    </div>
<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript">

    $('.icon-fanhui').click(function(){
        var bcity = $('.city').css('display');
        var barea = $('.area').css('display');
        if(barea=='block' && bcity=='block'){
          $('.area').hide();
        }
        if(barea=='none' && bcity=='block'){
          $('.city').hide();
        }
     });


   function showarea(btn){
      var cid=$(btn).val();
     
      $('.province').show();
      $('.area').show();
      $('.city').show();

      $('.area').empty();
      $.get('json/area.json',function(res){
       
        for (var i = 0;i<res.length;i++){
          
          if(cid==res[i].pid){
          var btn='<button value="'+res[i].id+'">'+res[i].name+'</button>';
          $('.area').append(btn);
       
          }
        }     
      })
    }


    function showcity(btn){
      var pid=$(btn).val();
     
      $('.province').show();
      $('.area').hide();
      $('.city').show();
       
      $.get('json/city.json',function(res){
        $('.city').empty();
        for (var i = 0;i<res.length;i++){
          
          if(pid==res[i].pid){
          var btn='<button onclick="showarea(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
          $('.city').append(btn);
       
          }
        }     
      });

    }


    function InitProvince(){

      $('.province').empty();

      $.get('json/province.json',function(res){

        for (var i = 0;i<res.length;i++){
          var btn='';
          btn='<button onclick="showcity(this)" value="'+res[i].id+'">'+res[i].name+'</button>';
          $('.province').append(btn);
        }     
      });
    };

    InitProvince();

</script>
</body>
</html>